<template>

    <!-- 土壤墒情 -->

    <div class="MnssTrsq">
        <!-- 选择器 -->
        <el-row class="selectInfo">
            <!-- 类别选择器 -->
            <el-col :span="1">
                <h5 class="textStyle">类别</h5>
            </el-col>
            <el-col :span="5">
                <el-select v-model="selectCategory" placeholder="请选择类别">
                    <el-option v-for="item in allCategory" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <!-- 发布日期选择器 -->
            <el-col :span="1">
                <h5 class="textStyle">发布日期</h5>
            </el-col>
            <el-col :span="8">
                <el-date-picker v-model="selectData" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" align="right">
                </el-date-picker>
            </el-col>
            <!-- 搜索数据输入框 -->
            <el-col :span="1">
                <h5 class="textStyle">搜索数据</h5>
            </el-col>
            <el-col :span="6">
                <el-input placeholder="请输入内容" v-model="searchInput" clearable class="inputStyle">
                </el-input>
            </el-col>
            <el-col :span="2">
                <el-button type="primary">开始搜索</el-button>
            </el-col>
        </el-row>
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%" stripe class="center-table" height="745">
            <el-table-column label="序号" prop="id" sortable width="100" align="center">
            </el-table-column>
            <el-table-column label="地块" prop="dk" width="200" align="center">
            </el-table-column>
            <el-table-column label="设备" prop="devicenumber" width="160" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="20cm土壤温度（℃）" prop="t20" sortable width="190" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="20cm含水量（%）" prop="w20" sortable width="170" align="center" show-overflow-tooltip> 
            </el-table-column>
            <el-table-column label="40cm土壤温度（℃）" prop="t40" sortable width="190" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="40cm含水量（%）" prop="w40" sortable width="170" align="center">
            </el-table-column>
            <el-table-column label="60cm土壤温度（℃）" prop="t60" sortable width="190" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="60cm含水量（%）" prop="w60" sortable width="170" align="center">
            </el-table-column>
            <el-table-column label="80cm土壤温度（℃）" prop="t80" sortable width="190" align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="80cm含水量（%）" prop="w80" sortable width="170" align="center">
            </el-table-column>
            <el-table-column label="时间" prop="datatime" sortable width="200" align="center">
            </el-table-column>
            
        </el-table>
        <!-- 分页器 -->
        <div class="block">
            <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="PageSize"
                layout="total, prev, pager, next , jumper" :total="tableLength" :pager-count="7" background
                :hide-on-single-page="false">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { getDataInterface } from '../../global'
export default {
    name: 'MnssTrsq',
    data() {
        return {
            allDataSubUrl:'/MnssTrsq/findByPage',
            // 从后端获取表格中数据
            tableData: [],
            // 所有数据的长度,还未从后端获取
            tableLength: -1,
            // 查找的关键字
            search: '',
            // 当前所在的页码
            currentPage: 1,
            // 每页显示的数据条数
            PageSize: 15,
            token: '',
            allCategory: [{
                value: '类别1',
                label: '类别1'
            }, {
                value: '类别2',
                label: '类别2'
            }, {
                value: '类别3',
                label: '类别3'
            }, {
                value: '类别4',
                label: '类别4'
            }, {
                value: '类别5',
                label: '类别5'
            }],
            selectCategory: '',
            selectData: '',
            searchInput: '',
            clickRowInfo:{}
        }
    },
    methods: {
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            // 改变默认的页数
            this.currentPage = val
            const dataPromise = getDataInterface(this.allDataSubUrl, this.currentPage, this.PageSize)
            dataPromise.then(res => {
                this.tableData = res.data
                this.tableLength = res.total
            })
        },
        rowJump(row,event,column){
            this.clickRowInfo = row
            this.$store.state.rowWheatDiseaseInfo = row
            console.log(this.$store.state.rowWheatDiseaseInfo)
            this.$router.push({ path: '/WheatPestImg' })
        }
    },
    mounted() {
        const dataPromise = getDataInterface(this.allDataSubUrl, this.currentPage, this.PageSize)
        // data就是传入resolve的response.data
        dataPromise.then(res => {
            this.tableData = res.data
            this.tableLength = res.total
        })
    }
}
</script>

<style scoped lang="less">
.MnssTrsq {
    .selectInfo {
        padding-bottom: 20px;
    }

    .inputStyle {
        padding-right: 80px;
    }

    .textStyle {
        line-height: 40px;
    }

    .block {
        margin-top: 15px;
        text-align: center;
    }
}
</style>